<template>
  <div class="video-player">
    <video
      ref="videoElementRef"
      @play="handleVideoPlay"
      @pause="handleVideoPause"
      controls
    >
      <source
        src="http://upfile.myfz.fun/uploads%2F2022%2F09%2F24%2Fge4ZfU9g_137649199_u2-1-208.mp4"
        type="video/mp4"
      />
      Your browser does not support the video tag.
    </video>
    <div class="barrage-container" ref="baseBarrageRef"></div>
  </div>
</template>
  
  <script setup>
import { ref, onMounted, onUnmounted } from "vue";

const barrageList = ref([
  {
    content: "发表内容11111",
    user: "发布者A",
    sendTime: 2,
    barrType: "base",
  },
  {
    content: "发表内容22222",
    user: "发布者B",
    sendTime: 4,
    barrType: "base",
  },
  {
    content: "发表内容33333",
    user: "发布者C",
    sendTime: 6,
    barrType: "base",
  },
  {
    content: "发表内容11111",
    user: "发布者A",
    sendTime: 5,
    barrType: "base",
  },
  {
    content: "发表内容22222",
    user: "发布者B",
    sendTime: 7,
    barrType: "base",
  },
  {
    content: "发表内容33333",
    user: "发布者C",
    sendTime: 30,
    barrType: "base",
  },
]);

const baseBarrageRef = ref(null);
const videoElementRef = ref(null);
let timer = null;
let pausedBarrages = [];

const startBarrage = () => {
  if (timer) return;
  timer = setInterval(() => {
    const videoElement = videoElementRef.value;
    if (videoElement && videoElement.currentTime) {
      while (
        barrageList.value.length > 0 &&
        barrageList.value[0].sendTime <= videoElement.currentTime
      ) {
        createBarrage(barrageList.value.shift());
      }
    }
  }, 1000);
};

const stopBarrage = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};

const createBarrage = (barrage) => {
  const barrageElement = document.createElement("div");
  barrageElement.textContent = `${barrage.user}:${barrage.content}`;
  barrageElement.className = "barrage"; // Use class instead of individual styles
  barrageElement.style.position = "absolute";
  barrageElement.style.whiteSpace = "nowrap";
  barrageElement.style.left = "100%";
  barrageElement.style.color = "#fff";
  barrageElement.style.top = `${Math.random() * 50}%`;
  baseBarrageRef.value.appendChild(barrageElement);

  // Start animation
  const startTime = performance.now();
  animateBarrage(barrageElement, startTime);
};

const animateBarrage = (element, startTime) => {
  const animate = (timestamp) => {
    const progress = timestamp - startTime;
    const newLeft = 100 - progress / 70;
    element.style.left = `${newLeft}%`;
    if (newLeft > -element.clientWidth) {
      requestAnimationFrame(animate);
    } else {
      element.remove();
    }
  };
  requestAnimationFrame(animate);
};

const pauseBarrages = () => {
  const barrages = baseBarrageRef.value.querySelectorAll(".barrage");
  pausedBarrages = Array.from(barrages).map((barrage) => {
    return {
      element: barrage,
      startTime: performance.now() - parseFloat(barrage.style.left) * 50,
    };
  });
};

const resumeBarrages = () => {
  pausedBarrages.forEach((barrage) => {
    animateBarrage(barrage.element, barrage.startTime);
  });
  pausedBarrages = [];
};

const handleVideoPlay = () => {
  startBarrage();
  resumeBarrages();
};

const handleVideoPause = () => {
  stopBarrage();
  pauseBarrages();
};

onMounted(() => {
  // Video element and barrage container are ready
});

onUnmounted(() => {
  stopBarrage();
});
</script>
  
  <style scoped>
.video-player {
  position: relative;
  width: 100%;
  height: 100%;
}

.barrage-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.barrage {
  position: absolute;
  white-space: nowrap;
  left: 100%;
  color: #fff;
}

video {
  width: 100%;
  height: 100%;
}
</style>
  